웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
아래는 효과적인 라디오 버튼을 생성하기 위한 방법과 이미지, CSS, 자바스크립트의 모든 방법에 대하여 정리한 내용입니다. 주요 내용은 아래와 같습니다.
1. 라디오 버튼 생성을 위한 html 코드
2. 라디오 버튼 css 스타일 코드
3. 라디오 버튼 구현을 위한 자바스크립트 인터렉션
아래 소스의 특징으로는 라디오 버튼 스타일의 커스터마이징 부분입니다. 브라우저 디폴트 디자인을 사용하지 않고 label 태그를 사용하였으며 라디오 버튼의 아이콘을 다르게 변경하였습니다. 라디오 버튼(Radio Button) 이미지의 소스 코드는 아래 링크를 참고해주세요.
참고로 아래 코드를 구현시 생성되는 모습은 아래 스크린샷과 유사하게 나타날 것입니다.
스크린샷) 구현될 라디오 버튼 이미지* 아이콘 이미지 다운받기
http://webisfree.com/freeimage/?imgquery=508-radio,-button,-icon,-input,-%EB%9D%BC%EB%94%94%EC%98%A4,-%EB%B2%84%ED%8A%BC,-%EC%95%84%EC%9D%B4%EC%BD%98,-%EC%9E%85%EB%A0%A5-59
# HTML 코드
<body>
<span class="title_span">이미지 크기설정</span>
<p class="radio_p">
<label for="btn01"><span class="icon radio"></span></label>
<span class="radioText">1024 x 800</span>
<input id="btn01" hidden type="radio" name="" />
</p>
<p class="radio_p">
<label for="btn02"><span class="icon radio"></span></label>
<span class="radioText">1600 x 1200</span>
<input id="btn02" hidden type="radio" name="" />
</p>
</body>
<span class="title_span">이미지 크기설정</span>
<p class="radio_p">
<label for="btn01"><span class="icon radio"></span></label>
<span class="radioText">1024 x 800</span>
<input id="btn01" hidden type="radio" name="" />
</p>
<p class="radio_p">
<label for="btn02"><span class="icon radio"></span></label>
<span class="radioText">1600 x 1200</span>
<input id="btn02" hidden type="radio" name="" />
</p>
</body>
# CSS 스타일 설정
<style type="text/css">
.radio_p {clear: both; overflow: hidden; margin: 0 15px 0 0; padding: 0; display: inline-block; }
.radio_p.last { margin-bottom: 0; }
.radio_p label { display: block; float: left; cursor: pointer; vertical-align: top; margin: 0 4px 0 0; width: 20px; height: 22px; }
.radio_p label .icon.radio { display: block; margin: 1px 0 0; width: 20px; height: 22px; background: url(./../images/icon_sprites2.png) no-repeat -95px -86px; }
.radio_p.checked label .icon.radio { background-position: -13px -86px; }
.radio_p.checked label .icon.radio { background-position: -69px -86px; }
.radio_p .radioText { float: left; margin: 0 26px 0 0; vertical-align: top; position: relative; height: 22px; line-height: 22px; }
.radio_p.checked .radioText { color: #5AB6E2; }
</style>
.radio_p {clear: both; overflow: hidden; margin: 0 15px 0 0; padding: 0; display: inline-block; }
.radio_p.last { margin-bottom: 0; }
.radio_p label { display: block; float: left; cursor: pointer; vertical-align: top; margin: 0 4px 0 0; width: 20px; height: 22px; }
.radio_p label .icon.radio { display: block; margin: 1px 0 0; width: 20px; height: 22px; background: url(./../images/icon_sprites2.png) no-repeat -95px -86px; }
.radio_p.checked label .icon.radio { background-position: -13px -86px; }
.radio_p.checked label .icon.radio { background-position: -69px -86px; }
.radio_p .radioText { float: left; margin: 0 26px 0 0; vertical-align: top; position: relative; height: 22px; line-height: 22px; }
.radio_p.checked .radioText { color: #5AB6E2; }
</style>
# 자바스크립트 설정
/* Radio button Click Event */
$(function() {
var raioEle = $('.radio_p label');
raioEle.on('click', function() {
// Remove previous check
$(this).parent().siblings('.radio_p').removeClass('checked');
// Add Class selected radio only
$(this).parent().addClass('checked');
});
});
$(function() {
var raioEle = $('.radio_p label');
raioEle.on('click', function() {
// Remove previous check
$(this).parent().siblings('.radio_p').removeClass('checked');
// Add Class selected radio only
$(this).parent().addClass('checked');
});
});
아래의 글도 찾고 계시지 않나요?
- 자바스크립트를 사용하여 input 태그에 한글 입력 막기, 한글 불가 방법
- [React] antd 라이브러리 Button 컴포넌트 알아보기
[react] antd 라이브러리 Input 컴포넌트
[React] antd 라이브러리 checkbox, radio 사용방법 및 예제- [HTML5] 캔버스 영역을 자바스크립트를 사용하여 base64로 저장하기
- 자바 템플릿 타임리프(thymeleaf)에서 html 파일 추가하는 방법 및 예제
[HTML5] Canvas 태그에 투명도 opacity 적용하기- VueJS 라우팅 설정시 # 기호 제거하기, hashbang
- CANVAS 태그에 오브젝트, 도형 이동하는 방법
[HTML5] Canvas 요소의 도형에 클릭 이벤트 사용하는 방법